<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文章列表</title>
    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/lib/jquery-1.12.4.min.js"></script>
</head>

<body>
    <div class="container-fluid">
        <div class="common_title">
            文章列表
        </div>
        <div class="container-fluid common_con">
            <div class="row opt_btns">
                <div class="col-xs-6">
                    <form class="form-inline">
                        <select id="selCategory" name="" class="form-control input-sm">
                        </select>
                        <select id="selStatus" name="" class="form-control input-sm">
                            <option value="">所有状态</option>
                            <option value="草稿">草稿</option>
                            <option value="已发布">已发布</option>
                        </select>
                        <button type="button" id="btnSearch" class="btn btn-default btn-sm">筛选</button>
                    </form>
                </div>
                <div class="col-xs-6">
                    <a href="article_release.html" class="btn btn-success btn-sm pull-right" id="release_btn">发表文章</a>
                </div>
            </div>

            <table class="table table-striped table-bordered table-hover mp20">
                <thead>
                    <tr>
                        <th>标题</th>
                        <th>作者</th>
                        <th>分类</th>
                        <th class="text-center">发表时间</th>
                        <th class="text-center">状态</th>
                        <th class="text-center" width="100">操作</th>
                    </tr>
                </thead>
                <tbody id="articleListContent">
                    <tr>
                        <td>王积千造统最头</td>
                        <td>杰克</td>
                        <td>奇趣事</td>
                        <td class="text-center">2017-06-08 07:08:46</td>
                        <td class="text-center">已发布</td>
                        <td class="text-center">
                            <a href="article_edit.html" class="btn btn-default btn-xs">编辑</a>
                            <a href="javascript:deleteTr( 1005 );" class="btn btn-danger btn-xs">删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>

            <div class="row text-center">
                <ul class="pagination pagination-sm">
                    <!-- <li class="page-item first disabled"><a href="#" class="page-link">首页</a></li>
                    <li class="page-item prev disabled"><a href="#" class="page-link">上一页</a></li>
                    <li class="page-item active"><a href="#" class="page-link">1</a></li>
                    <li class="page-item"><a href="#" class="page-link">2</a></li>
                    <li class="page-item"><a href="#" class="page-link">3</a></li>
                    <li class="page-item"><a href="#" class="page-link">4</a></li>
                    <li class="page-item"><a href="#" class="page-link">5</a></li>
                    <li class="page-item"><a href="#" class="page-link">6</a></li>
                    <li class="page-item"><a href="#" class="page-link">7</a></li>
                    <li class="page-item next"><a href="#" class="page-link">下一页</a></li>
                    <li class="page-item last"><a href="#" class="page-link">尾页</a></li> -->
                </ul>
            </div>
        </div>
    </div>

    <script src="./js/utils/config.js"></script>
    <script src="./js/utils/category.js"></script>
    <script src="./js/utils/article.js"></script>
    <script src="./js/lib/template-web.js"></script>
    <script src="./js/lib/jquery.twbsPagination.min.js"></script>

    <script id="tmp" type="text/html">
        {{each data item }}
        <tr>
            <td>{{item.title}}</td>
            <td>{{item.author}}</td>
            <td>{{item.type}}</td>
            <td class="text-center">{{item.date}}</td>
            <td class="text-center">{{item.state}}</td>
            <td class="text-center">
                <a href="./article_edit.html?id={{item.id}}" class="btn btn-default btn-xs">编辑</a>
                <a data-id="{{item.id}}" href="javascript:;" class="btn btn-danger btn-xs del">删除</a>
            </td>
        </tr>
        {{/each}}
    </script>

    <script id="tmpCategory" type="text/html">
        <option value="">所有分类</option>
        {{each data item }}
        <option value="{{item.id}}">{{item.name}}</option>
        {{/each }}
    </script>

    <script>
        // 设置左侧菜单
        $('#release_btn').click(function () {
            window.parent.setMenu(1, 1);
        });

        $(function () {
            var currentPage = 1; // 保存当前用户选中的页码
            var type = ''; //文章类型的编号
            var state = ''; //文章状态
            var totalPage = ''; // 总页数

            // 设置文章类别下拉框
            category.show(function (res) {
                if (res.code === 200) {
                    var htmlStr = template('tmpCategory', res);
                    // console.log(htmlStr);
                    // console.log(res);
                    $('#selCategory').html(htmlStr);
                }
            });

            // 获取并显示表格数据
            getAndShow();

            // 筛选
            $('#btnSearch').click(function () {
                // 筛选功能
                //   1. 更新 当前选中的类别和状态
                type = $('#selCategory').val();
                state = $('#selStatus').val();

                currentPage = 1;

                // console.log(type, state);
                //   2. 再次查询
                getAndShow();
            });

            //删除功能 动态创建的  事件委托

            $('#articleListContent').on('click', '.del', function () {
                // console.log(this);

                if (!window.confirm('确定要删除吗？')) {
                    return;
                }
                //获取之前在模板中生成的自定义属性
                // var id = $(this).attr('data-id');
                var id = $(this).data('id');
                // console.log(id);
                article.del(id, function (res) {
                    if (res.code === 200) {
                        //删除成功 重新编辑
                        getAndShow();
                    } else {
                        alert(res.msg);
                    }
                });
            })







            function getAndShow() {
                article.show({
                    type: type,
                    state: state,
                    page: currentPage
                }, function (res) {
                    //  console.log(res);
                    if (res.code === 200) {
                        //1.把res.data渲染到表格中
                        var htmlStr = template('tmp', res);
                        $('#articleListContent').html(htmlStr)
                        // 2.初始化分页
                        //更改查询条件后 totalPage(总页数)并没有更新
                        //如果本次查询得到的totalPages与上一次不同，则销毁重建
                           
                        if (totalPage != res.totalPage) {
                            // alert('两次不一样，销毁重建');
                            totalPage = res.totalPage; //保存本次查询的总页数
                            $('.pagination').twbsPagination('destroy');
                        }


                        $('.pagination').twbsPagination({
                            totalPages: res.totalPage, // 一总有几页
                            visiblePages: 5,
                            first: '首页',
                            prev: '上一页',
                            next: '下一页',
                            last: '尾页',
                            initiateStartPageClick: false, // 不要在初始化完成后点击第一页
                            //点击调用
                            onPageClick: function (event, page) {
                                // console.log(page); // 被点击的页码
                                // 1. 更新currentPage  实现切换
                                currentPage = page;
                                // 2. 重新查询
                                getAndShow();
                            }
                        });
                    }
                });
            }
        })
    </script>

</body>

</html>